import { EGrooveGeometryType, Groove } from '@/types';
import { ProColumns, ProForm } from '@ant-design/pro-components';
import { Space } from 'antd';
import { uniqueId, values } from 'lodash-es';
import { AxisBackup } from '../AxisBackup';
import { CustomEditableTable } from '../CustomEditableTable';
import {
  FormCount,
  FormFace,
  FormPoint,
  FormSize,
  FormTitle,
  createDepthRule,
  createRadiusRule,
  gtZeroRule,
} from '../CustomForm';
import { DataAdd } from '../DataAdd';
import { faceOptions } from '../constants';
import { Axis } from '../types';
import { isLockAxis } from '../utils/axis';

interface Props {
  grooveId?: string;
  onSelectGroove: (grooveId: string) => void;
}

export const RoundCornerGrooveEditor = (props: Props) => {
  const path = ['plank', 'groupedGroove', EGrooveGeometryType.ROUND_CORNER];
  const columns: ProColumns[] = [
    {
      title: '序号',
      valueType: 'index',
      editable: false,
    },
    {
      title: '基准面',
      dataIndex: 'plankFaceId',
      valueType: 'select',
      fieldProps: {
        options: faceOptions,
      },
      editable: false,
    },
    {
      title: '槽宽',
      dataIndex: 'width',
      valueType: 'digit',
      formItemProps: () => {
        return {
          rules: [gtZeroRule],
        };
      },
    },
    {
      title: '槽深',
      dataIndex: 'depth',
      valueType: 'digit',
      formItemProps: (form, config) => {
        const { plankFaceId } = config.entity;
        const size = form.getFieldValue(['plank', 'size']);
        return {
          rules: [gtZeroRule, createDepthRule({ size, plankFaceId })],
        };
      },
    },
    {
      title: '圆角',
      dataIndex: 'radius',
      valueType: 'digit',
      formItemProps: (_, config) => {
        return {
          rules: [gtZeroRule, createRadiusRule(config)],
        };
      },
    },
    ...values(Axis)
      .map<ProColumns[]>((axis) => {
        return [
          {
            editable(_, { plankFaceId }) {
              return !isLockAxis({ axis: Axis[axis], plankFaceId });
            },

            title: (
              <span>
                起点 <AxisBackup axis={axis} />
              </span>
            ),

            dataIndex: ['start', axis],
            valueType: 'digit',
          },
          {
            editable(_, { plankFaceId }) {
              return !isLockAxis({ axis: Axis[axis], plankFaceId });
            },

            title: (
              <span>
                终点 <AxisBackup axis={axis} />
              </span>
            ),

            dataIndex: ['end', axis],
            valueType: 'digit',
          },
        ];
      })
      .flat(),
    {
      title: '操作',
      valueType: 'option',
    },
  ];

  return (
    <>
      <CustomEditableTable
        title={
          <FormTitle title="圆角方槽列表" extra={<FormCount name={path} />} />
        }
        rowKey="grooveId"
        name={path}
        columns={columns}
        editableRowId={props.grooveId}
        onEditable={props.onSelectGroove}
        dataAddRender={({ addRow }) => <SquareGrooveAdd onConfirm={addRow} />}
      />
    </>
  );
};

type RoundCornerGrooveAddData = Pick<
  Groove,
  | 'grooveId'
  | 'plankFaceId'
  | 'start'
  | 'end'
  | 'width'
  | 'depth'
  | 'geometryType'
>;

function SquareGrooveAdd(props: {
  onConfirm: (data: RoundCornerGrooveAddData) => void;
}) {
  const path = ['temp', 'roundCornerGroove'];

  function onConfirm(
    data: Omit<RoundCornerGrooveAddData, 'grooveId' | 'geometryType'>,
  ) {
    props.onConfirm({
      grooveId: uniqueId('temp-square-groove-id-'),
      geometryType: EGrooveGeometryType.ROUND_CORNER,
      ...data,
    });
  }

  return (
    <>
      <FormTitle title="添加圆角方槽" />
      <DataAdd baseName={path} onConfirm={onConfirm}>
        {({ addBaseName }) => {
          return (
            <>
              <FormFace label="基准面" name={addBaseName(['plankFaceId'])} />
              <ProForm.Item label="槽尺寸">
                <Space>
                  <FormSize name={addBaseName(['width'])} desc="槽宽" />
                  <FormSize name={addBaseName(['depth'])} desc="槽深" />
                  <FormSize name={addBaseName(['radius'])} desc="圆角" />
                </Space>
              </ProForm.Item>
              <ProForm.Item label="起点">
                <FormPoint name={addBaseName(['start'])} />
              </ProForm.Item>
              <ProForm.Item label="终点">
                <FormPoint name={addBaseName(['end'])} />
              </ProForm.Item>
            </>
          );
        }}
      </DataAdd>
    </>
  );
}
